<template>
  <div v-if="timingTriggerCreateFlag">
    <ContentWrap>
      <HeaderTitle title="定时触发配置" content="定时触发测试地震规则配置" :isdivider="false" />
    </ContentWrap>
    <ContentWrap>
      <div style="margin:10px 0">
        <el-button
          type="primary"
          v-hasPermi="['earthquake:job:create']"
          @click="handleCreate('create')"
        >
          <Icon class="mr-5px" icon="ep:plus" />
          {{ t('action.create') }}
        </el-button>
      </div>
      <!-- 列表 -->
      <el-table v-loading="loading" :data="list" header-cell-class-name="custom-header" stripe>
        <el-table-column align="center" label="定时任务名称" prop="name" />
        <el-table-column align="center" label="触发频率" prop="triggerFrequency" />
        <el-table-column align="center" label="触发时间" prop="triggerTime" />
        <el-table-column align="center" label="震级范围" prop="magnitudeRange" />
        <el-table-column align="center" label="是否推送" prop="isPublic" />
        <el-table-column align="center" label="启用" prop="status">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              @click="toggleEnable(scope.row)"
              v-hasPermi="['earthquake:job:update-status']"
              :active-value="1"
              :inactive-value="2"
              inline-prompt
              :active-icon="Check"
              :inactive-icon="Close"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="handleCreate('view', scope.row.id)">
              查看
            </el-button>
            <el-button
              link
              v-hasPermi="['earthquake:job:update']"
              type="primary"
              @click="handleCreate('update', scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              link
              v-hasPermi="['earthquake:job:delete']"
              type="danger"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </ContentWrap>
  </div>
  <div v-else>
    <timingTriggerCreate
      @CreateFlag="getCreateFlag"
      :timingTriggerData="timingTriggerData"
    ></timingTriggerCreate>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import * as timingTrigger from '@/api/earthquake/timingTrigger'
import { Check, Close } from '@element-plus/icons-vue'
import timingTriggerCreate from '@/views/earthquake/timingTrigger/create.vue'
defineOptions({ name: 'TimingTrigger' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const router = useRouter() // 路由
const timingTriggerCreateFlag = ref(true)
const timingTriggerData = ref()
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await timingTrigger.getTimingTriggerPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 切换启用状态的逻辑 */
const toggleEnable = async (item) => {
  await timingTrigger.updateStatus(item.id, item.status)
  await getList()
}

/** 添加/修改操作 */
const handleCreate = (type, id) => {
  timingTriggerCreateFlag.value = false
  timingTriggerData.value = {
    type: type,
    id: id
  }
}
const getCreateFlag = (e) => {
  timingTriggerCreateFlag.value = e
  getList()
}

/** 删除按钮操作 */
const handleDelete = async (id) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    let ids = []
    if (id !== 0) {
      ids.push(id)
      // 发起删除
      await timingTrigger.deleteJob(ids)
      message.success(t('common.delSuccess'))
      // 刷新列表
      await getList()
    }
  } catch {}
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
<style scoped>
:deep(.custom-header) {
  background-color: #f2f3f5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}
</style>